<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>部门管理</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
    <style type="text/css">
      .layui-form-label {
        width: auto !important;
      }
    
      .organizeName,
      .operation span:first-of-type {
        color: #1990FF;
      }
    
      .operation span:last-of-type {
        color: #f5222d;
      }
    
      .pageNav {
        margin: 0 auto;
        width: fit-content;
      }
    
      .pageNav a,
      .operation span {
        cursor: pointer;
        display: inline-block;
      }
    
      cite {
        cursor: default;
      }
      textarea{
        min-height: 150px !important;
      }
      td
      {
        white-space: nowrap;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <script src="./js/main.js" charset="utf-8"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>-->
    <script src="./layui/layui.js" charset="utf-8"></script>
    <script src="./js/jQuery.main.js"></script>

    <form class="layui-form" action="" lay-filter="data">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">搜索：</label>
          <input type="text" name="dept" class="layui-input" style="width: 14em;" placeholder="部门名称" value="">
        </div>
        <div class="layui-inline">
          <input type="text" name="displayLength" class="layui-input" style="display: none;" placeholder="每页页数" value="10">
          <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">搜索部门</button>
        </div>
      </div>
    </form>

    <table class="layui-table" lay-skin="line">
      <thead>
        <tr>
          <th style="text-align: center">部门名称</th>
          <th style="text-align: center">ERP组织Id(FPrdOrgId)</th>
          <th style="text-align: center">操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <div style="display: flex;">
      <div style="flex: 1">
        <div class="pageNav">
          <span class="layui-breadcrumb" lay-separator="-">
            <a class="fristPage">首页</a>
            <a class="lastPage">上一页</a>
            <a><cite>第<span id="page"></span>页</cite></a>
            <a class="nextPage">下一页</a>
            <a class="endPage">尾页</a>
          </span>
        </div>
      </div>
    </div>
      
    <script type="text/javascript">
      var displayStart = 1;
      var endPage = null;
      var layer = layui.layer;
      var form = null;
      var list = null;

      layui.use(['form', 'element'], function() {
        form = layui.form;
      
        search(1);
      
        form.on('submit(searchBtn)', function() {
          search(1);
          return false;
        });
        $('.fristPage').click(function() {
          search(1);
          return false;
        });
        $('.lastPage').click(function() {
          search((displayStart > 1 ? displayStart - 1 : 1));
          return false;
        });
        $('.nextPage').click(function() {
          search((displayStart < endPage ? displayStart + 1 : endPage));
          return false;
        });
        $('.endPage').click(function() {
          search(endPage);
          return false;
        })
        form.on('submit(changeBtn)', function() {
          $.ajax({
            url: url + '/notice/saveOrUpdate',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(form.val('change')),
            success: function(res) {
              layer.alert(res.msg,{
                end: function(){
                  layer.closeAll();
                  search();
                }
              });
            }
          })
          return false;
        });
      })

      
      function search(index) {
        if (!index) var index = displayStart;
        var data = form.val('data');
        data.displayStart = index;
        $.ajax({
          url: url + '/sys-dept/list',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(data),
          success: function(res) {
            $('tbody').empty();
            displayStart = res.data.current;
            endPage = res.data.pages;
            list = res.data.records;
            for (var i = 0; i < res.data.records.length; i++) {
              $('tbody').append(
                "<tr>"+
                "</td><td class='noticeTitle'>" +res.data.records[i].dept + "</td>" +
                "</td><td style='color: #01AAED'>" +res.data.records[i].erpId + "</td>" +
                      "<td class='operation'><span class='edit' onclick='edit(" + res.data.records[i].id + ")'>编辑</span>" +
                      "　<span onclick='deleteDept(" + res.data.records[i].id + ")'>删除</span></td>" +
                      "</tr>"
              );
            }
            $('#page').html(displayStart)
          }
        })
      }
      
      function edit(index) {
        var i = 0;
        for(; i<list.length; i++){
          if(list[i].id == index) break;
        }
        layer.open({
          type: 1,
          skin: 'layui-layer-rim',
          area: ['350px', '200px'],
          title: '修改部门信息',
          content: `
            <form class="layui-form" action="" lay-filter="change">
              <div style="margin: 10px 20px 10px;">
                <input type="text" id="deptId" name="id" style="display: none;">
                <div class="layui-form-item">
                  <label class="layui-form-label">部门名称：</label>
                  <div class="layui-input-block">
                    <input id="dept" type="text" name="dept" class="layui-input" placeholder="请输入部门名称" value="" lay-verify="required">
                  </div>
                </div>

                <input type="button" class="layui-btn" value="确认修改" lay-submit="" lay-filter="changeBtn" style="margin: 20px auto 0;display: block;">
              </div>
            </form>
          `,
          success: function(){
            $.ajax({
              url: url + '/sys-dept/getDept/'+index,
              contentType: 'application/json',
              success: function(res) {
                $('#deptId').val(res.data.id);
                $('#dept').val(res.data.dept);
                form.render();
              }
            })
            form.render();
          }
        });

        form.on('submit(changeBtn)', function(data) {
          console.log("校验通过，准备提交");
          var data = form.val("change");
          data.userId=sessionStorage.getItem('userId');
          console.log(data);
          $.ajax({
            url: url + '/sys-dept/update',
            method: 'POST',
            contentType: 'application/json',
            async: false,
            data: JSON.stringify(data),
            success: function(res) {
              console.log(res);
              if (res.code == 200) {
                parent.layer.alert('保存编辑', {
                  end: function(){
                    location.reload();
                  }
                });
              }
              else
                layer.msg(res.msg)
            }
          })
          return false;
        })

      }


      
      function deleteDept(index) {
        let confirm1=layer.confirm('您确定要删除该部门吗？', {
          btn: ['确定','取消']
        },function () {
        $.ajax({
          url: url + '/sys-dept/deleteDept',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify({
            userId: sessionStorage.getItem('userId'),
            goalId:index
          }),
          success: function(res) {
            layer.msg(res.msg)
            if(res.code==200) search();
          }
        })
         layer.close(confirm1);
        },function (){
           layer.close(confirm1);
        }
        )
      }

    </script>
  </body>
</html>
